<template>
  <div id="Myself">
    <!-- 顶部 -->
    <section class="top">
      <img src="@/assets/images/11.jpg" />
    </section>
    <section class="main">
      <SPsousuo />
      <TJnav />
      <SPlunbo />

      <section class="jie1">
        
        <!-- 在这试一下编程式跳转 -->
        <section class="tu1" @click="fn1()">
          
          <img src="@/assets/images/18.jpg" />
        </section>
      </section>

      <section class="jie2">
        <img src="@/assets/images/17.jpg" />
      </section>


     <section>
       <SpXie />
     </section>
       
    </section>

    

    <router-view />
    <Dwbottom />
  </div>
</template>

<script>
import SpXie from "@/components/SpXie.vue"
import Dwbottom from "@/components/Obottom.vue";
import SPsousuo from "@/components/SPsousuo.vue";
import TJnav from "@/components/TJnav.vue";
import SPlunbo from "@/components/SPlunbo.vue";
export default {
  components: {
    Dwbottom,
    SPsousuo,
    TJnav,
    SPlunbo,
    SpXie
  },
  methods:{
    fn1(){
      this.$router.push('/GouM')
    }
  }
};
</script>

<style scoped>
#Myself {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#Myself .top {
  width: 100%;
  height: 0.53rem;
  border-bottom: 0.01rem solid black;
}
#Myself .top img {
  width: 100%;
  height: 100%;
}
#Myself .main {
  height: 100%;
  overflow:auto;
}
#Myself .main img {
  width: 100%;
  height: 100%;
}
#Myself .main .jie1 {
  width: 100%;
  height: 1.36rem;
}
#Myself .main .jie1 .tu1 {
  width: 3.37rem;
  height: 1.36rem;
  /* border: 0.01rem solid black; */
  margin: auto;
}
#Myself .main .jie2 {
  width: 100%;
  height: 1.89rem;
  background: burlywood;
}
</style>